Modern deep dive [TIL] 모던 자바스크립트 Deep Dive - 비동기 프로그래밍 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트(실행 중인 실행 컨텍스트)가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다. 이벤트 루프는 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수(콜백 함수, 이벤트... Modern deep diveJavaScriptTILJavaScript [TIL] 모던 자바스크립트 Deep Dive - 타이머 즉, setTimeout 함수의 콜백 함수는 두 번째 인수로 전달받은 시간 이후 단 한 번 실행되도록 호출 스케줄링된다. 즉, setInterval 함수의 콜백 함수는 두 번째 인수로 전달받은 시간이 경과할 때마다 반복 실행되도록 호출 스케줄링된다. 디바운스는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호... Modern deep diveJavaScriptTILJavaScript [TIL] 모던 자바스크립트 Deep Dive - Ajax 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다. Web API인 XMLHttpRequest 객체는 HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다. HTTP 요청에 대한 응답을 받기 시작한 경우 HTTP 요청 시간이 초과한 경우 HTTP 요청 초기화 HTTP 요청 전송 특정 HTTP 요청 헤더의 값을 설정 특정... Modern deep diveJavaScriptTILJavaScript [TIL] 모던 자바스크립트 Deep Dive - REST API REST API는 자원(Resource), 행위(Verb), 표현(Representations)의 3가지 요소로 구성된다. REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다. HTTP 요청 메서드 URI는 리소스를 표현하는 데 집중하고 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는 것이 RESTful API를 설계하는 중심 규칙이다. 리... TILModern deep diveJavaScriptJavaScript [TIL] 모던 자바스크립트 Deep Dive - 프로토타입 따라서 Circle 생성자 함수가 생성하는 모든 인스턴스는 getArea 메서드를 상속받아 사용할 수 있다. 프로토타입을 상속받은 하위(자식) 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다. [[Prototype]] 내부 슬롯에는 직접 접근할 수 없지만, 위 그림처럼 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근할 수 있다. 그리고 ... TILModern deep diveJavaScriptJavaScript [TIL] 모던 자바스크립트 Deep Dive - Strict Mode strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. strict mode를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가한다. 전역의 선두에 추가하면 스크립트 전체에 strict mode가 적용된다. 함수 몸... TILModern deep diveJavaScriptJavaScript [TIL] 모던 자바스크립트 Deep Dive - 실행 컨텍스트 (2) 객체 환경 레코드는 기존의 전역 객체가 관리하던 var 키워드로 선언한 전역 변수와 함수 선언문으로 정의한 전역 함수, 표준 빌트인 객체를 관리하고, 선언적 환경 레코드는 let, const 키워드로 선언한 전역 변수를 관리한다. 전역 코드 평가 과정에서 var 키워드로 선언한 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 환경 레코드의 객체 환경 레코드에 연결된 BindingObje... TILModern deep diveJavaScriptJavaScript [TIL] 모던 자바스크립트 Deep Dive - 프로그래밍과 자바스크립트 이때 명령을 수행할 주체는 컴퓨터이기 때문에, 사람은 컴퓨터가 이해할 수 있는 언어, 즉 기계어로 명령을 전달해야 한다. 그렇기 때문에 기계어로 직접 명령을 전달하는 것을 대신할 가장 유용한 대안으로 사람이 이해할 수 있는 약속된 구문(문법)으로 구성된 "프로그래밍 언어"를 사용하여 프로그램을 작성 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기를 사용하는 방법이 채택되... TILModern deep diveJavaScriptJavaScript [TIL] 모던 자바스크립트 Deep Dive - 타입 변환과 단축 평가 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 하는데, 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다. 자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환(암묵적 타입 변환)할 때가 많다. 자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해... JavaScriptTILModern deep diveJavaScript [TIL] 모던 자바스크립트 Deep Dive - 객체 리터럴 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior) 이처럼 객체는 객체의 상태를 나타내는 값(프로퍼티)와 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다. 프로퍼티 프로퍼티 키와 프로퍼티 값으로 사용할 수 있는 값은 다음과 같다. 프로퍼티 값: 자바스크립트에서 사용할 수 있는... TILModern deep diveJavaScriptJavaScript
[TIL] 모던 자바스크립트 Deep Dive - 비동기 프로그래밍 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트(실행 중인 실행 컨텍스트)가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다. 이벤트 루프는 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수(콜백 함수, 이벤트... Modern deep diveJavaScriptTILJavaScript [TIL] 모던 자바스크립트 Deep Dive - 타이머 즉, setTimeout 함수의 콜백 함수는 두 번째 인수로 전달받은 시간 이후 단 한 번 실행되도록 호출 스케줄링된다. 즉, setInterval 함수의 콜백 함수는 두 번째 인수로 전달받은 시간이 경과할 때마다 반복 실행되도록 호출 스케줄링된다. 디바운스는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호... Modern deep diveJavaScriptTILJavaScript [TIL] 모던 자바스크립트 Deep Dive - Ajax 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다. Web API인 XMLHttpRequest 객체는 HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다. HTTP 요청에 대한 응답을 받기 시작한 경우 HTTP 요청 시간이 초과한 경우 HTTP 요청 초기화 HTTP 요청 전송 특정 HTTP 요청 헤더의 값을 설정 특정... Modern deep diveJavaScriptTILJavaScript [TIL] 모던 자바스크립트 Deep Dive - REST API REST API는 자원(Resource), 행위(Verb), 표현(Representations)의 3가지 요소로 구성된다. REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다. HTTP 요청 메서드 URI는 리소스를 표현하는 데 집중하고 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는 것이 RESTful API를 설계하는 중심 규칙이다. 리... TILModern deep diveJavaScriptJavaScript [TIL] 모던 자바스크립트 Deep Dive - 프로토타입 따라서 Circle 생성자 함수가 생성하는 모든 인스턴스는 getArea 메서드를 상속받아 사용할 수 있다. 프로토타입을 상속받은 하위(자식) 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다. [[Prototype]] 내부 슬롯에는 직접 접근할 수 없지만, 위 그림처럼 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근할 수 있다. 그리고 ... TILModern deep diveJavaScriptJavaScript [TIL] 모던 자바스크립트 Deep Dive - Strict Mode strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. strict mode를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가한다. 전역의 선두에 추가하면 스크립트 전체에 strict mode가 적용된다. 함수 몸... TILModern deep diveJavaScriptJavaScript [TIL] 모던 자바스크립트 Deep Dive - 실행 컨텍스트 (2) 객체 환경 레코드는 기존의 전역 객체가 관리하던 var 키워드로 선언한 전역 변수와 함수 선언문으로 정의한 전역 함수, 표준 빌트인 객체를 관리하고, 선언적 환경 레코드는 let, const 키워드로 선언한 전역 변수를 관리한다. 전역 코드 평가 과정에서 var 키워드로 선언한 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 환경 레코드의 객체 환경 레코드에 연결된 BindingObje... TILModern deep diveJavaScriptJavaScript [TIL] 모던 자바스크립트 Deep Dive - 프로그래밍과 자바스크립트 이때 명령을 수행할 주체는 컴퓨터이기 때문에, 사람은 컴퓨터가 이해할 수 있는 언어, 즉 기계어로 명령을 전달해야 한다. 그렇기 때문에 기계어로 직접 명령을 전달하는 것을 대신할 가장 유용한 대안으로 사람이 이해할 수 있는 약속된 구문(문법)으로 구성된 "프로그래밍 언어"를 사용하여 프로그램을 작성 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기를 사용하는 방법이 채택되... TILModern deep diveJavaScriptJavaScript [TIL] 모던 자바스크립트 Deep Dive - 타입 변환과 단축 평가 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 하는데, 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다. 자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환(암묵적 타입 변환)할 때가 많다. 자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해... JavaScriptTILModern deep diveJavaScript [TIL] 모던 자바스크립트 Deep Dive - 객체 리터럴 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior) 이처럼 객체는 객체의 상태를 나타내는 값(프로퍼티)와 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다. 프로퍼티 프로퍼티 키와 프로퍼티 값으로 사용할 수 있는 값은 다음과 같다. 프로퍼티 값: 자바스크립트에서 사용할 수 있는... TILModern deep diveJavaScriptJavaScript